<template>
	<div class="section" ref="parent">
		<div class="border-row"></div>
		<div class="border-col"></div>
		<div class="section-header">驻温高校热门专业毕业生统计</div>
		<div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
	</div>
</template>
<script>
import { getRankingOfProfessionalGraduates } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: {
				majors: [],
				datas: [
					[],
					[],
					[],
					[]
				]
			}
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			this.jz=false
			getRankingOfProfessionalGraduates(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				if (data && data.length > 0) {
					for (var i=0;i<data[0].value.length;i++){
						this.chartsData.majors.push(data[0].value[i].name);
						this.chartsData.datas[0].push(data[0].value[i].value);
						this.chartsData.datas[1].push(data[1].value[i].value);
						this.chartsData.datas[2].push(data[2].value[i].value);
						this.chartsData.datas[3].push(data[3].value[i].value);
					}
					// this.chartsData = data;
				}else{
					
				}
				this.chartInit();
			});
			this.chartInit();
		},
		chartInit() {
			let option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					transitionDuration:0,
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				legend: {
					show: true,
					top: 20,
					textStyle: {
						color: '#8ebafb'
					}
				},
				xAxis: [
					{
						type: 'category',
						data: ['制造业', '互联网', '金融业', '大数据', '农业', '畜牧业', '养殖业'],
						axisTick: {
							alignWithLabel: true
						},
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.3)'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#8ebafb'
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.3)'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#8ebafb'
							}
						}
					}
				],
				series: [
					{
						name: '专科',
						type: 'bar',
						barWidth: 15,
						data: this.data(400, 7)
					},
					{
						name: '本科',
						type: 'bar',
						barWidth: 15,
						data: this.data(300, 7)
					},
					{
						name: '硕士',
						type: 'bar',
						barWidth: 15,
						data: this.data(100, 7)
					},
					{
						name: '博士',
						type: 'bar',
						barWidth: 15,
						data: this.data(10, 7)
					}
				],
				color: ['#37a2da', '#67e0e3', '#ffdb5c', '#ff9f7f']
			};
			let chart = this.$echarts.init(this.$refs.charts);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section
	width 100%
	height 100%
	margin-top 20px
</style>
